import React from 'react'
import {TabBar} from 'zarm';
import { useState } from 'react'
import CustomIcon from '../CoustomIcon'
import { useNavigate ,useLocation} from 'react-router-dom';

export default function NavBar(showNav) {
  const {pathname}=useLocation()
    const [activeKey, setActiveKey] = useState(pathname);
    // const [visible, setVisible] = useState(true);
    const navigate=useNavigate()

    const changeTab=(path)=>{
        console.log('path=',path);
        setActiveKey(path);
        navigate(path);

    }
  
  return (
    <TabBar 
        visible={showNav} 
        activeKey={activeKey} 
        onChange={changeTab}
    >
    <TabBar.Item 
        itemKey="/" 
        title="账单" 
        icon={<CustomIcon type="icon-zhangdan" />} 
    />
    <TabBar.Item
      itemKey="/data"
      title="统计"
      icon={<CustomIcon type="icon-tongjifenxi"/>}
      badge={{ shape: 'circle', text: '3' }}
    />
    <TabBar.Item
      itemKey="/user"
      title="我的"
      icon={<CustomIcon type="icon-wode" />}
      badge={{ shape: 'dot' }}
    />
  </TabBar>
  )
}
